<template>
  <view class="width-100">
    <view class="" v-if="datalist.length > 0">
      <view
        class="listWrap"
        v-for="(it, index) in datalist"
        :key="index"
        @click="goCarOrderDetail(it)"
      >
        <view class="flex pad-t-b-10 border-bottom-1">
          <view class="flex-jc-sb width-70" @click.stop="goStore(it.store_id)">
            <i-icon
              icon="icondianpu"
              type="single"
              size="42rpx"
              color="#FFE23E"
            ></i-icon>
            <view class="block-inline title">{{ it.store_name }}</view>
            <i-icon
              icon="iconbao_1"
              v-if="tab == 0 || (tab == 1 && it.guarantee == 1)"
              type="single"
              size="32rpx"
              color="#FBB000"
            ></i-icon>
          </view>
          <view class="flex-jc-sb width-30 u-text-right color-EB5B01">{{
            getStatus(it.contract_status)
          }}</view>
        </view>
        <view class="pad-t-b-10 border-bottom-1">
          <view class="flex pad-t-b-10 font-26">
            <view class="width-20 flex">
              <view class="flex-jc-sbcolor-999 carImg">
                <image
                  :src="
                    'https://files.yzsheng.com/goodimg/brandimg/' +
                    it.brand_id +
                    '.png'
                  "
                  mode="aspectFit"
                ></image>
              </view>

              车型:
            </view>
            <view class="flex-jc-sb width-80 flex">
              <view class="flex-jc-sb width-75 color-333 font-28">{{
                it.car_name
              }}</view>
              <view class="flex-jc-sb">
                <view class="u-text-right color-333"
                  >￥{{ it.payable_amount }}</view
                >
                <view class="u-text-right color-999">x1</view>
              </view>
            </view>
          </view>
          <view class="flex pad-t-b-10 font-26">
            <view class="flex-jc-sb width-20 color-999">外观内饰:</view>
            <view class="flex-jc-sb width-80 color-333">
              <view
                :style="{ background: it.car_colour.outerColour.colorCoding }"
                class="iconcolor"
              ></view>
              {{ it.car_colour.outerColour.color }} /{{
                it.car_colour.inColour.color
              }}
              <view
                v-if="it.car_colour.inColour.neiColor.length == 1"
                :style="{ background: it.car_colour.inColour.colorCoding }"
                class="iconcolor"
              ></view>
              <view v-else class="iconcolor"
                ><view
                  class="iconcolor2"
                  v-for="(it, i) in it.car_colour.inColour.neiColor"
                  :key="i"
                  :style="{ background: it }"
                ></view
              ></view>
            </view>
          </view>
          <view class="flex pad-t-b-10">
            <view class="flex-jc-sb width-50 u-text-right">
              <text class="font-24 color-999">定金：</text>
              <text class="font-26 color-333">￥{{ it.deposit_amount }}</text>
            </view>
            <view class="flex-jc-sb width-50 u-text-right">
              <text class="font-24 color-999">实付款：</text>
              <text class="font-26 font-bold color-EB5B01"
                >￥{{ it.payable_amount }}</text
              >
            </view>
          </view>
        </view>

        <!-- 报价订单 -->
        <!-- 待付款   待收货  询价订单待确认-->
        <!-- 发送消息界面过来的显示的界面 -->
        <view class="" v-if="listType === 'msg'">
          <view class="mt-10 u-text-right">
            <button @click="contactSeller(it, true)" class="btn-bg-yellow">
              发送
            </button>
          </view>
        </view>
        <view class="" v-else>
          <view
            class="flex mt-5"
            v-if="
              (tab == 1 &&
                (it.contract_status == 0 || it.contract_status == 3)) ||
              (tab == 0 && it.contract_status == 1)
            "
          >
            <view class="flex-jc-sb width-40 line40 font-24"></view>
            <view class="flex-jc-sb flex pad-t-b-10">
              <button
                class="btn-bg-yellow"
                @click.stop="contactSeller(it, false)"
              >
                <i-icon
                  icon="iconxiaoxi"
                  type="single"
                  class="middle"
                  size="32rpx"
                  color="#333"
                ></i-icon>
                {{ tab == 0 ? '联系商家' : '联系买方' }}
              </button>
              <button class="btn-bg-yellow" @click.stop="call(it)">
                <i-icon
                  icon="iconlianxi"
                  type="single"
                  class="middle"
                  size="32rpx"
                  color="#333"
                ></i-icon>
                {{ tab == 0 ? '致电商家' : '致电买方' }}
              </button>
            </view>
          </view>
          <!-- 已完成 -->
          <view class="flex mt-5" v-if="it.contract_status === '4'">
            <view class="flex-jc-sb width-40 line40 font-24"></view>
            <view class="flex-jc-sb flex pad-t-b-10 u-text-right">
              <button
                class="btn-bg-yellow"
                @click.stop="$u.throttle(handleOrder('del', it), 1000)"
              >
                删除订单
              </button>
              <button
                class="btn-bg-yellow"
                @click.stop="$u.throttle(goFindCar, 1000)"
              >
                继续寻车
              </button>
            </view>
          </view>
          <!--   待发货-->
          <view class="flex mt-5" v-if="it.contract_status == '2'">
            <view class="flex-jc-sb width-40 line40 font-24"></view>
            <view class="flex-jc-sb flex pad-t-b-10 u-text-right">
              <view
                class="btn-bg-yellow"
                v-if="tab == 0"
                @click.stop="contactSeller(it, false)"
              >
                <i-icon
                  icon="iconxiaoxi"
                  type="single"
                  class="middle"
                  size="32rpx"
                  color="#333"
                ></i-icon>
                联系商家
              </view>
              <!-- 待发货 -->
              <button class="btn-bg-yellow width250" v-else>
                <i-icon
                  icon="iconwuliu"
                  type="single"
                  class="middle"
                  size="32rpx"
                  color="#333"
                ></i-icon>
                录入物流信息
              </button>
              <button class="btn-bg-yellow" @click.stop="call(it)">
                <i-icon
                  icon="iconlianxi"
                  type="single"
                  class="middle"
                  size="32rpx"
                  color="#333"
                ></i-icon>
                致电商家
              </button>
            </view>
          </view>
          <!-- 待确认  -->
          <view class="flex mt-5" v-if="tab == 1 && it.contract_status == 1">
            <view class="flex-jc-sb width-50 flex">
              <view class="flex-jc-sb icon-btn" @click.stop="call(it)"
                ><i-icon
                  icon="icondianhua"
                  type="multiple"
                  class="middle"
                  size="34rpx"
                ></i-icon
              ></view>
              <view
                class="flex-jc-sb icon-btn"
                @click.stop="contactSeller(it, false)"
                ><i-icon
                  icon="iconxiaoxi1"
                  type="multiple"
                  class="middle"
                  size="34rpx"
                ></i-icon
              ></view>
            </view>
            <view class="flex-jc-sb width-50 u-text-right pad-t-b-10">
              <button
                class="btn-bg-yellow"
                @click="$u.throttle(goCarOrderDetail(it), 1000)"
              >
                查看合同
              </button>
              <!-- <button class="btn-bg-yellow" >确认合同</button> -->
            </view>
          </view>

          <!-- 询价订单 -->
          <!-- 待付款 -->
          <view class="flex mt-5" v-if="tab == 0 && it.contract_status == 0">
            <view class="flex-jc-sb width-70 line40 font-24"
              >剩余付款时间：{{ it.surplustime }}</view
            >
            <view class="flex-ac-fe u-text-right pad-t-b-10"
              ><button
                class="btn-bg-yellow"
                @click.stop="$u.throttle(gopay(it), 1000)"
              >
                去付款
              </button></view
            >
          </view>
          <!-- 待收货 -->
          <view class="flex mt-5" v-if="tab == 0 && it.contract_status == 3">
            <view class="flex-ac-fe width-100 u-text-right pad-t-b-10">
              <button
                class="btn-bg-yellow"
                @click.stop="$u.throttle(handleOrder('getGoods', it), 1000)"
              >
                确认收货
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="u-text-center pad-t-b-40" v-else>
      <image class="toastImg" src="@/static/img/images/tu.png" mode=""></image>
      <view class="color-999"> 暂无订单数据，快去下单吧 </view>
    </view>
  </view>
</template>

<script>
import { AddMobileContactData } from '@/utils/common-api.js'
export default {
  data() {
    return {
      statusList: [
        { val: 0, lable: '待付款' },
        { val: 1, lable: '待确认' },
        { val: 2, lable: '待发货' },
        { val: 3, lable: '待收货' },
        { val: 4, lable: '已完成' },
        { val: 5, lable: '已取消' },
      ],

      contract_status: 'contract_status',
    }
  },
  props: ['tab', 'datalist', 'listType'],
  watch: {},
  computed: {},
  methods: {
    getStatus(status) {
      let statusName = ''
      this.statusList.forEach((it) => {
        if (it.val == status) {
          statusName = it.lable
        }
      })
      return statusName
    },
    // 删除订单
    handleOrder(val, it) {
      let value = {
        id: it.id,
        val: val,
      }
      console.log(value)
      this.$emit('handleOrder', value)
    },
    // 跳转到合同页面
    goCarOrderDetail(status) {
      console.log('tab', this.tab)
      uni.navigateTo({
        url:
          '/pages_order/carOrderDetail/carOrderDetail?id=' +
          status.id +
          '&tab=' +
          this.tab,
      })
      // this.$emit('gonext', 1);
    },
    // 去付款
    gopay(it) {
      console.log(it)
      uni.navigateTo({
        url:
          '/pages_order/payDeposit/payDeposit?id=' +
          it.id +
          '&deposit_amount=' +
          it.deposit_amount +
          '&time=' +
          it.endtime,
      })
    },
    // 去寻车
    goFindCar() {
      uni.navigateTo({
        url: '/pages_findCar/findtheCar/findtheCar',
      })
    },
    // 跳转到店铺
    goStore(id) {
      uni.navigateTo({
        url: '/pages_common/store/store?id=' + id,
      })
    },
    // 拨打电话
    call(it) {
      console.log(this.tab, it)
      let phone = ''
      if (this.tab == 1) {
        phone = it.buyermobile
      } else {
        phone = it.phone
      }
      AddMobileContactData(this.$store.state.userInfoDetail.store.storeId)
      uni.makePhoneCall({
        phoneNumber: phone, //仅为示例
      })
    },

    //联系卖家
    contactSeller(data, type) {
      if (type) {
        this.$store.commit('news/backRoom', {
          backFlag: true,
          tab: this.tab,
        })
      } else {
        AddMobileContactData(this.$store.state.userInfoDetail.store.storeId)
      }
      this.$store.commit('news/setCardInfo', {
        name: data.car_name,
        price: data.payable_amount,
        type: 'orderInfo',
        imgSrc: data.goodimg,
      })
      if (this.tab === '0') {
        //与商家聊天
        if (type) {
          uni.navigateBack({
            delta: 1,
          })
        } else {
          this.$store.commit('news/createConversationActive', {
            user: data.store_name, //名称
            img: '', //头像
            lastTime: '', //
            userId: data.store_id, //id
            conversationID: 'C2C' + data.store_id, //
          })
          uni.navigateTo({
            url: `/pages_news/contactSeller/contactSeller?user=${data.store_name}&pageId=${data.id}&tab=${this.tab}`,
          })
        }
      } else {
        //与买家聊天

        if (type) {
          uni.navigateBack({
            delta: 1,
          })
        } else {
          this.$store.commit('news/createConversationActive', {
            user: data.store_name, //名称
            img: '', //头像
            lastTime: '', //
            userId: data.buyer_store_id, //id
            conversationID: 'C2C' + data.buyer_store_id, //
          })
          uni.navigateTo({
            url: `/pages_news/contactSeller/contactSeller?user=${data.store_name}&pageId=${data.id}&tab=${this.tab}`,
          })
        }
      }
    },
  },
}
</script>

<style scoped lang="scss">
page {
  width: 100%;
  background-color: #f6f6f6;
}
// .width-100 {

// }
.listWrap {
  width: 100%;
  background: #fff !important;
  margin: 2.5% 0rpx;
  border-radius: 10rpx;
  padding: 1%;
  .title {
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
    margin: auto 10rpx;
  }
  .middle {
    vertical-align: middle;
  }
  .line40 {
    line-height: 80rpx;
  }
  .icon-btn {
    width: 50%;
    // text-align: center;
    padding-left: 10%;
    line-height: 80rpx;
  }
}
.width250 {
  width: 260rpx;
}
.iconcolor {
  width: 40rpx;
  height: 40rpx;
  border-radius: 8rpx;
  display: inline-block;
  border: 2rpx solid #e4e4e4;
  // line-height: 40rpx;
  margin: -8rpx 4rpx;
  border-radius: 50%;
  overflow: hidden;
}
.iconcolor2 {
  width: 40rpx;
  height: 20rpx;
}
.toastImg {
  width: 263rpx;
  height: 277rpx;
}
.pad-t-b-40 {
  padding: 80rpx 0px;
}
.carImg {
  width: 36rpx;
  height: 36rpx;
  line-height: 36rpx;
  margin: 0rpx 10rpx;
  border-radius: 50%;
  overflow: hidden;
  image {
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }
}
</style>
